import React,{Component} from 'react'
import {Layout,BackTop} from 'antd'
import MainNav from '../components/MainNav'
import Category1 from './Category1'
import {HashRouter as Router,Route,Switch,Redirect} from 'react-router-dom'
import Home from '../views/Home'
import MainFooter from '../components/MainFooter'
import Category2 from './Category2'
import NewsDetail from './NewsDetail'
import Detail from './Detail'
import ProList from './ProList'
const {Header,Content,Footer} = Layout
export default class MainContainer extends Component{
    constructor(props){
      super(props)
      this.state={
        sty:{display:'block'}
      }
    }
    componentWillReceiveProps(a){
      console.log(this.props.location.hash)
      console.log(this.props.location.pathname)
      if(a.location.pathname != this.props.location.pathname){
        this.props.history.go(a.location.pathname)
      }
      if(this.props.location.pathname == '/home'){
        this.setState({
          sty:{display:'none'}
        })
      }
    }
    tap(){
      window.location.href='#/home'
    }
    componentDidMount(){
      if(this.props.location.pathname == '/home'){
        this.setState({
          sty:{display:'none'}
        })
      }
    }
    render(){
        return(
            <div >
              <Layout className="wrap">
                <Header>
                  <MainNav/>
                </Header>
                <Content>
                  <Router>
                    <Switch>
                      <Route path="/home" component={Home} />
                      <Route path="/newsdetail" component={NewsDetail} />
                      <Route path="/proList/:id" component={ProList} />
                      <Route path="/category1" component={Category1} />
                      <Route path="/category2" component={Category2} />
                      <Route path="/detail/:id" component={Detail} />
                      <Redirect to="/home" component={Home} />
                    </Switch>
                  </Router>
                  
                </Content>
                <Footer style={{minHeight:'460px',overflow:'hidden'}}>
                  <MainFooter/>
                </Footer>
              </Layout>
              <BackTop visibilityHeight={100}>
                <div className="ant-back-top-inner">TOP</div>
                <button style={this.state.sty} onClick={()=>this.tap()} className="backHome">返回 <br/>   首页</button>
              </BackTop>
              
            </div>
        )
    }
}